.page {
    position: relative;

    .background {
        position: absolute;
        top: 0;
        width: 100%;
        height: 720px;
        background: linear-gradient(
            180deg,
            rgba(30, 190, 173, 0.4) 0%,
            rgba(240, 242, 245, 0) 100%
        );
    }

    .content {
        display: flex;
        flex-direction: column;
        padding: 50px 24px;

        .classInfo {
            margin-bottom: 16px;
            .contentBox();

            &_sign {
                .boxSign('~@/static/classManage/bg_yuan_yellow.png');
            }
            &_title {
                .boxTitle();
            }
            &_content {
                display: flex;
                flex-direction: column;
                // gap: 24px;
                width: 100%;
                margin-top: 32px;
                font-size: 32px;

                &_item {
                    &:not(:last-child) {
                        margin-bottom: 24px;
                    }

                    display: inline-flex;

                    .customSkeleton {
                        margin: 0;

                        --width: 100%;
                        --height: 45px;
                    }

                    & > :first-child {
                        min-width: 208px;
                        color: #999;
                    }
                    & > :last-child {
                        color: #333;
                    }
                }
            }
        }

        .teacherInfo {
            .contentBox();

            &_sign {
                .boxSign('~@/static/classManage/bg_yuan_green.png');
            }
            &_title {
                .boxTitle();
            }
            &_content {
                display: flex;
                flex-direction: column;
                // gap: 36px;
                margin-top: 32px;

                &_item {
                    &:not(:last-child) {
                        margin-bottom: 36px;
                    }

                    position: relative;
                    padding: 32px 24px;
                    background: #f6fafa;
                    border-radius: 8px;

                    &_name {
                        color: #333;
                        font-weight: bold;
                        font-size: 34px;
                    }

                    &_info {
                        display: flex;
                        flex-direction: column;
                        // gap: 12px;
                        margin-top: 24px;
                        color: #999;
                        font-size: 30px;

                        & > div:not(:last-child) {
                            margin-bottom: 12px;
                        }

                        .category {
                            display: flex;
                            flex-wrap: wrap;
                            // gap: 8px;
                            color: #1ebead;

                            &_item {
                                &:not(:last-child) {
                                    margin-right: 8px;
                                }

                                margin-bottom: 8px;
                                padding: 4px 8px;
                                background: #edfaf9;
                                border: 2px solid #1ebead;
                                border-radius: 2px;
                            }
                        }
                    }

                    &_callSign {
                        .phoneSign();

                        background-color: #1ebead;
                        box-shadow: 0 2px 24px 0 rgba(48, 208, 195, 0.5);
                        & > div {
                            .phoneIcon('~@/static/classManage/icon_phone_call.png');
                        }
                    }

                    &_callError {
                        .phoneSign();

                        background: #ddd;

                        & > div {
                            .phoneIcon('~@/static/classManage/icon_phone_error.png');
                        }
                    }
                }
            }
        }
    }
}

.contentBox() {
    position: relative;
    padding: 32px;
    background-color: #fff;
    border-radius: 16px;
}

.boxTitle {
    position: relative;
    z-index: 10;
    color: #333;
    font-weight: bold;
    font-size: 36px;
}

.boxSign(@url) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 167px;
    height: 87px;
    background: url(@url) no-repeat;
    background-size: contain;
}

.phoneSign() {
    position: absolute;
    top: -12px;
    right: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 48px;
}

.phoneIcon(@url) {
    width: 48px;
    height: 48px;
    background-image: url(@url);
    background-size: contain;
}
